<!DOCTYPE html>
<html>
<head>
  {% load static %}
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo</title>
  <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
  <link rel="stylesheet" href="{% static './layui/css/layui.css' %}">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="{% static './layui/layui.js' %}"></script>
</head>
<body style="padding: 30px">
<div class="layui-tab layui-tab-brief">
  <ul class="layui-tab-title">
    <li class="layui-this">房间规格</li>
    <li>宿舍家电</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
        <table class="layui-hide" id="tab1" lay-filter="tab1"></table>
    </div>
    <div class="layui-tab-item">
        <table class="layui-hide" id="tab2" lay-filter="tab2"></table>
    </div>
  </div>
</div>
</body>
<script type="text/html" id="barDemo">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-xs" lay-event="tab1_edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="tab1_delete">删除</a>
  </div>
</script>
<script>
    layui.use(['table'],function () {
        var table = layui.table;

        // 创建渲染实例
        table.render({
            elem: '#tab1',
            url: "{% url 'xyss_admin:dormSpecsApi' %}", // 此处为静态模拟数据，实际使用时需换成真实接口
            height: 'full-35', // 最大高度减去其他容器已占有的高度差
            css: [ // 重设当前表格样式
              '.layui-table-tool-temp{padding-right: 145px;}'
            ].join(''),
            cellMinWidth: 80,
            totalRow: true, // 开启合计行
            page: true,
            cols: [[
              {type: 'checkbox', fixed: 'left'},
              {field:'id', fixed: 'left', width:'20%', title: 'ID', sort: true, totalRowText: '合计：'},
              {field:'scale', width:'20%', title: '宿舍规格'},
              {field:'num', width:'20%', title: '宿舍人数'},
              {field:'description', width:'20%', title: '描述'},
              {fixed: 'right', title:'操作', width: '20%', minWidth: 125, toolbar: '#barDemo'}
            ]],
            done: function(){
              var id = this.id;
              // 下拉按钮测试
              dropdown.render({
                elem: '#dropdownButton', // 可绑定在任意元素中，此处以上述按钮为例
                data: [{
                  id: 'add',
                  title: '新增楼层'
                }],
                // 菜单被点击的事件
                click: function(obj){
                  var checkStatus = table.checkStatus(id)
                  var data = checkStatus.data; // 获取选中的数据
                  switch(obj.id){
                    case 'add':
                      layer.open({
                        title: '添加楼层',
                        type: 2,
                        area: ['80%','80%'],
                        content: '{% url "xyss_admin:userAdd"%}'
                      });
                    break;
                  }
                }
              });

            },
            error: function(res, msg){
              console.log(res, msg)
            }
        });
        // 触发单元格工具事件
        table.on('tool(tab1)', function(obj){ // 双击 toolDouble
            var data = obj.data; // 获得当前行数据
            // console.log(obj)
            if(obj.event === 'tab1_edit'){
              layer.open({
                title: '编辑 - id:'+ data.id,
                type: 1,
                area: ['80%','80%'],
                content: '<div style="padding: 16px;">自定义表单元素</div>'
              });
            } else if(obj.event === 'tab1_delete'){
              layer.open({
                title: '删除 - id:'+ data.id,
                type: 1,
                area: ['80%','80%'],
                content: '<div style="padding: 16px;">自定义表单元素</div>'
              });
            }
          });
        // 创建渲染实例
        table.render({
            elem: '#tab2',
            url: "{% url 'xyss_admin:floorListApi' %}", // 此处为静态模拟数据，实际使用时需换成真实接口
            height: 'full-35', // 最大高度减去其他容器已占有的高度差
            css: [ // 重设当前表格样式
              '.layui-table-tool-temp{padding-right: 145px;}'
            ].join(''),
            cellMinWidth: 80,
            totalRow: true, // 开启合计行
            page: true,
            cols: [[
              {type: 'checkbox', fixed: 'left'},
              {field:'id', fixed: 'left', width:'25%', title: 'ID', sort: true, totalRowText: '合计：'},
              {field:'floor_name', width:'25%', title: '登录账号'},
              {field:'description', width:'25%', title: '姓名'},
              {fixed: 'right', title:'操作', width: '25%', minWidth: 125, toolbar: '#barDemo'}
            ]],
            done: function(){
              var id = this.id;
              // 下拉按钮测试
              dropdown.render({
                elem: '#dropdownButton', // 可绑定在任意元素中，此处以上述按钮为例
                data: [{
                  id: 'add',
                  title: '新增楼层'
                }],
                // 菜单被点击的事件
                click: function(obj){
                  var checkStatus = table.checkStatus(id)
                  var data = checkStatus.data; // 获取选中的数据
                  switch(obj.id){
                    case 'add':
                      layer.open({
                        title: '添加楼层',
                        type: 2,
                        area: ['80%','80%'],
                        content: '{% url "xyss_admin:userAdd"%}'
                      });
                    break;
                  }
                }
              });

            },
            error: function(res, msg){
              console.log(res, msg)
            }
        });
    })
</script>
</html>